<template>
	<el-drawer title="考试详情" v-model="visible" :size="800" destroy-on-close @closed="$emit('closed')">
		<el-container v-loading="loading">
			<el-form style="padding: 15px;">
				<div style="text-align: center">
					<span style="font-weight: 600;font-size: 20px;">{{ this.form.examTestTitle }}</span>
				</div>
				<div style="width: 100px;height: 50px;position: absolute;right: 20px;top:70px;line-height: 50px">
					<el-button type="success" style="height: 50px;width: 100%;" v-if="this.form.passMark<this.form.grade">合格</el-button>
					<el-button type="danger" style="height: 50px;width: 100%;" v-else>不合格</el-button>
				</div>
				<el-row :gutter="24">
					<el-col :lg="12">
						<el-form-item label="参考人">{{ this.form.testUserName }}</el-form-item>
					</el-col>
					<el-col :lg="12">
						<el-form-item label="参考时间">{{ this.form.beginTime }}~{{ this.form.endTime }}</el-form-item>
					</el-col>
				</el-row>
				<div v-for="(qList,index) in questionsList" :key="index">
					<span style="font-size: 16px;font-weight: 600">{{ index + 1 }}、{{ qList.title }}</span><span style="margin-left: 20px;color: red">{{ qList.grade }}</span>/分
					<div v-if="qList.examType=='2'" style="margin-bottom: 20px">
						<div><span>解答：</span>{{ result[qList.recordId] }}</div>
					</div>
					<div v-else>
						<div v-for="(item,i) in qList.questionsList" :key="i" style="width: 100%;margin-left: 40px;font-size: 14px;margin-bottom: 5px">
							<el-radio v-model="result[qList.recordId]" v-if="qList.examType=='0'" :label="item.optValue" :disabled="true">{{ item.optValue }}、{{ item.childTitle }}</el-radio>
							<el-checkbox-group v-model="result[qList.recordId]" v-if="qList.examType=='1'" :disabled="true">
								<el-checkbox :label="item.optValue">{{ item.optValue }}、{{ item.childTitle }}</el-checkbox>
							</el-checkbox-group>
						</div>
					</div>
				</div>
			</el-form>
			<el-footer style="text-align: center;">
				<el-button @click="visible=false">关闭</el-button>
			</el-footer>
		</el-container>
	</el-drawer>
</template>

<script>
export default {
	emits: ['success', 'closed'],
	components: {},
	data() {
		return {
			loading: false,
			visible: false,
			isSaveing: false,
			gradeList: {},
			questionsList: [],
			result: [],
			form: {
				recordId: '',
				examTestId: '',
				examTestTitle: '',
				testUserName: '',
				beginTime: '',
				endTime: '',
				passMark: 0,
			},
		}
	},
	mounted() {
	},
	methods: {
		//显示
		open() {
			this.visible = true;
			return this
		},
		async getExamGradeById() {
			var res = await this.$API.office.exam.getExamGradeById.get({recordId: this.form.recordId});
			if (res.code == 200) {
				this.result = JSON.parse(res.data.result)
			}
		},
		async getExamQuestionListById() {
			var res = await this.$API.office.exam.getExamQuestionListById.get({recordId: this.form.examTestId});
			if (res.code == 200) {
				this.questionsList = res.data
			}
		},
		setData(data) {
			this.form.recordId = data.recordId;
			this.form.examTestId = data.examTestId
			this.form.examTestTitle = data.examTestTitle
			this.form.testUserName = data.testUserName
			this.form.beginTime = data.beginTime
			this.form.endTime = data.endTime
			this.form.passMark = data.passMark
			this.getExamGradeById();
			this.getExamQuestionListById();
		},
	}
}
</script>

<style>
</style>
